<template>
  <div id="product-list-one">
    <h2>product list one</h2>
    <ul>
      <li v-for="(product,index) in saleProducts" :key="index">
        <span class="name">{{product.name}}</span>
        <span class="price">{{product.price}}$</span>
      </li>
    </ul>
    <button @click="reducePrice(4)">商品降价</button>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { mapActions } from "vuex";
export default {
  methods: {
    reducePrice(payload) {
      // 组件内的使用
      //   this.$store.state.products.forEach(product => {
      //     product.price -= 1;
      //   });
      //   mutation方法的触发 触发的时候会在控制台vue下进行响应
      //   this.$store.commit("reducePrice");
      // actions的触发
      this.$store.dispatch("reducePrices", payload);
    }

    // mapActions
    // ...mapActions(["reducePrices"])
  },
  computed: {
    product() {
      return this.$store.state.products;
    },
    // saleProducts() {
    // 这里取到vuex中的getters的方法
    //   return this.$store.getters.saleProducts;
    // }
    // mapGetters
    ...mapGetters(["saleProducts"])
    // saleProducts() {
    //   let saleProducts = this.$store.state.products.map(product => {
    //     return {
    //       name: "**" + product.name + "**",
    //       price: product.price / 2
    //     };
    //   });
    //   return saleProducts;
    // }
  },
  data() {
    return {};
  }
};
</script>